<!-- 跟投收益记录 -->
<template>
    <div class="investmentProfit">
       <ul>
           <li><span>姓名：</span><span>{{projectRow.name}}</span></li>
           <li><span>工号：</span><span>{{projectRow.jobNumber}}</span></li>
           <li><span>职位：</span><span>{{projectRow.position}}</span></li>
           <li> <span>业务线：</span><span>{{projectRow.businessLine}}</span></li>
           <li><span>部门：</span><span>{{projectRow.department}}</span></li>
       </ul>
       <ul>
           <li><span>累计跟投金额：</span><span>￥{{projectRow.quota}}</span></li>
           <li><span>累计分红金额：</span><span>￥{{projectRow.amountBonus}}</span></li>
           <li><span>实际累计收益率：</span><span>{{projectRow.rateOfReturn}}</span></li>
           <li><span>累计结算金额：</span><span>￥{{projectRow.sumAmount}}</span></li>
       </ul>
       <el-form :inline="true">
            <el-form-item label="项目名称：">
                <el-input v-model="searchName" placeholder="请输入项目名称"></el-input>
            </el-form-item>
            <el-form-item >
                <el-button type="primary"  @click="searchList" id="monitorEnter">查询</el-button>
            </el-form-item >
        </el-form>
        <table-list 
        :tableData='tableData'
        :tableInfos ='tableInfos'
        :tableChangeBtns='tableChangeBtns'
        :hasSera='true'
        >
        </table-list>
        <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            style="margin-top:30px"
            :current-page.sync="pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="totalSize">
        </el-pagination>
        <el-dialog
            :title="detailTiele"
            :visible.sync="detailedVisible"
            width="70%"
            >
            <el-tabs >
                <el-tab-pane label="清算明细">
                    <c-table :info="detailInfo"></c-table>
                </el-tab-pane>
                <el-tab-pane label="退款明细">
                    <r-table :info="detailInfo"></r-table>
                </el-tab-pane>
            </el-tabs>

            <span slot="footer" class="dialog-footer">
                <el-button @click="detailedVisible = false">取 消</el-button>
                <el-button type="primary" @click="detailedVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import api from '@/api/apiPath'
import tableList from './tableList'
import clearTable from './clearDetailTable'
import refundTabel from './refundDetailTable'
export default {
	components: {
        'table-list':tableList,
        'c-table':clearTable,
        'r-table':refundTabel,
        },
	data () {
		return {
            searchName:'',
            projectRow:{},
            
            tableInfos:[
                {label:'项目名称',prop:'projectName'},
                {label:'跟投金额（元）',prop:'quota'},
                {label:'分红金额（元）',prop:'amountBonus'},
                {label:'结算总额（元）',prop:'sumAmount'},
                {label:'收益率',prop:'profit'},
                {label:'结算日期',prop:'updateTime'},
                {label:'操作',prop:'changeBtn'},
            ],
            tableChangeBtns:[
                {label:"明细",type:'view',fn:this.viewList},
            ],
            tableData:[],
            pageNum: 1,
            pageSize: 10,//每页几条
            totalSize: 0,
            detailedVisible:false,
            detailInfo:{},
        }
    },
    methods:{
        handleClick(){},
        //新增查看编辑
        viewList(type,idx){
            this.detailInfo = this.tableData[idx];
            this.detailedVisible = true;
        },
        searchList(){
            let param = {
                pageNum:this.pageNum,
                pageSize:this.pageSize,
                jobNumber:this.projectRow.jobNumber,
                projectName:this.searchName,
            };
            this.axios.post(api.getInvestmentProfitDetail, param).then(res => {
                if (res.data.code == 200) {
                    let lists = res.data.data.list || [];
                    lists.forEach(list=>list.profit = list.profit?list.profit+'%':'');
                    this.tableData = lists
                    this.totalSize = res.data.data.total;
                }
            })
            
        },
        handleCurrentChange () {
            this.searchList()
		},
		handleSizeChange (val) {
			this.pageSize = val
			this.searchList()
		},
	},
	created () {
         ({row:this.projectRow} =this.$route.query)
         if(!this.projectRow.jobNumber){
             this.$router.go(-1);
             return
         }
         this.searchList();
    },
    computed:{
        detailTiele(){
            return `${this.detailInfo.projectName} - ${this.projectRow.name} - 明细`;
        }
    },
	destroyed() {
		
	},
	filters: {

	}
}

</script>

<style lang="stylus" scoped>
.investmentProfit{
    ul{
        padding: 0;
        margin: 0;
        list-style: none;
        display :flex;
        flex-wrap: wrap ;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #ddd;

       li{
            width: calc(33% - 20px);
            padding: 10px;
            display: flex;
            word-break: break-all;
            line-height: 24px;

           span:nth-child(2){
              
               width:calc(100% - 130px);
           }
           
       }
    }
}

</style>
